<template>
	<view class="record_container">

		<view class="record_box" v-for="(item,i) in lineList" :key="i">
			<view class="record_head">
				<view class="record_head_first">
					<view class="record_head_name font_s28">
						<!-- 张三 -->
						{{item.name}}
					</view>
					<text class="record_head_btn font_s24 "  :style='mapperStatus[item.status]'>
						{{item.statusName}}
					</text>
					
				
				</view>
				<view class="record_head_num">
					{{item.uid}}
				</view>
			</view>
			<view class="record_line">
			</view>
			<view class="record_status" >
				<view class="line_span">
					<view class="div_circle div_circle_solid">
					</view>
					<!-- 状态路线: -->
					{{item.lineName}}
				</view>

				<view class="line_span">
					<view class="div_circle div_circle_shell">
					</view>
					<!-- 列出各条推荐路线的主管及其状态 -->
					{{item.labels[0]}}
				</view>

				<view class="line_span">
					<view class="div_circle div_circle_shell">
					</view>
					<!-- 数学化指示(如标记，图标)显示状态。 -->
					{{item.labels[1]}}
				</view>
			</view>
		</view>
		<backOff/>
	</view>
</template>

<script setup>
	import backOff from '../../components/custom/backOff.vue';
	import {ref} from "vue"
	const mapperStatus={
		1:{
			color:'#31D49D',
			background:'rgba(49, 212, 157, 0.2)',
		},
		2:{
			color:'#D14473',
			background:'#FEC5D6',
		}
	}
	const lineList = ref([
		{
			name: '张三',
			uid: '568463U',
			status: 1,
			statusName:'活跃',
			lineName:'状态路线:',
			labels: 
				['列出各条推荐路线的主管及其状态。', '数学化指示(如标记，图标)显示状态。'],
			
		},
		{
			name: '张三',
			uid: '568463U',
			status: 2,
			statusName:'已锁仓',
			lineName:'状态路线:',
			labels: 
				['列出各条推荐路线的主管及其状态。', '数学化指示(如标记，图标)显示状态。'],
			
		},
		{
			name: '张三',
			uid: '568463U',
			status: 1,
			statusName:'活跃',
			lineName:'状态路线:',
			labels: 
				['列出各条推荐路线的主管及其状态。', '数学化指示(如标记，图标)显示状态。'],
			
		},
		
	])
</script>

<style scoped lang="scss">
	.statusColor{
		color: #D14473 !important;
		background: #FEC5D6 !important;
	}
	.record_container {
		padding: 31rpx 30rpx;
		height: 100%;
		box-sizing: border-box;
	}

	.record_box {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(49, 212, 157, 0.19);
		border-radius: 16rpx;
		width: 100%;
		margin-bottom: 20rpx;

		.record_head {
			padding: 26rpx 20rpx 0 20rpx;
			box-sizing: border-box;

			.record_head_first {

				display: flex;
				justify-content: space-between;
			}



			.record_head_num {
				margin: 33rpx 0 21rpx 0;
			}

			.record_head_btn {
				padding: 5rpx 20rpx !important;
				// color: var(--theme-color);
				// background: var(--theme-bgColor);
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #31D49D;
				font-style: normal;
				background: rgba(49, 212, 157, 0.2);
				border-radius: 2rpx;
			}
		}

		.record_line {
			width: 100%;
			height: 1rpx;
			border: 1rpx solid rgba(194, 194, 194, 0.34);
		}

		.record_status {
			padding: 15rpx 20rpx 40rpx;
			height: 106rpx; //
			font-size: 20rpx;



			.line_span {
				display: flex;
				align-items: center;
				// padding: 20rpx;

			}

			.div_circle {
				border: 1rpx solid #aaa;
				border-radius: 50%;
				width: 7rpx;
				height: 7rpx;
				display: flex;
				flex-direction: column;
				text-align: center;
				margin: 15rpx 20rpx;
			}

			.div_circle_solid {
				background: #000000;
			}

			.line_span:nth-child(n+2) {
				margin-left: 30rpx;
			}

		}

	}
</style>